<!--
  copyright (c) 2009 google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <style type="text/css">
      v\:* {
        behavior:url(#default#VML);
      }
      .sourcecodebox {
	  BORDER-RIGHT: #c7cfd5 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #c7cfd5 1px solid; PADDING-LEFT: 8px; BACKGROUND: #f1f5f9; PADDING-BOTTOM: 8px; MARGIN: 20px 0px; BORDER-LEFT: #c7cfd5 1px solid; PADDING-TOP: 8px; BORDER-BOTTOM: #c7cfd5 1px solid; TEXT-ALIGN: left
      }
    </style>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAwMhwoJJvbA36y50a8srh7hSCEl9-SC7IDYicgXt1cEF18Qh3FhT_3JQ8CRIhCdb8-3PDAooruRxsbw
"></script>
    <script type="text/javascript">

    var map;
    var geocoder;
    //var counter=0;

    function blankArray(n) {
     for (var i=0; i < n; i++)
       this[i] = null;
     this.length = n;
    }


    function initialize() {
     map = new GMap2(document.getElementById("map_canvas"));

     //Add map control
	 map.removeMapType(G_HYBRID_MAP);
	 map.setCenter(new GLatLng(34, 0), 1);
     map.addControl(new GLargeMapControl());
     var mapControl = new GMapTypeControl();
     map.addControl(mapControl);

     //Add Polyline
       var polyline = new GPolyline([
       new GLatLng(30.66, 104.2),
       new GLatLng(30.28, 120.2),new GLatLng(49,-123)
       ], "#ff0000", 5);
       map.addOverlay(polyline);

     geocoder = new GClientGeocoder();
    }




    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
     //map.clearOverlays();
     if (!response || response.Status.code != 200) {
       alert("Sorry, we were unable to geocode that address");
     } else {
       place = response.Placemark[0];
       point = new GLatLng(place.Point.coordinates[1],
                           place.Point.coordinates[0]);
	   marker = new GMarker(point);
       map.addOverlay(marker);

       if(place.Point.coordinates[1]==30.6610565&&place.Point.coordinates[0]==104.0817566){
		 var myHtml = place.address + '<br>' +
         '<img src=\"pic/sc.jpg\" alt=\"Sichuan\"></img><h2>Jiuzhaigou in my hometown</h2>';
       }
       else if(place.Point.coordinates[1]==30.2739768&&place.Point.coordinates[0]==120.1729739){
		 var myHtml = place.address + '<br>' +'<img src=\"pic/zju.jpg\" alt=\"Zhejiang University\"></img><h2>Study for two years and continue from April</h2>';
       }
       else if(place.Point.coordinates[1]==49.263588&&place.Point.coordinates[0]==-123.138565){
		 var myHtml = place.address + '<br>' +'<img src=\"pic/van.jpg\" alt=\"Vancouver\"></img><h2>Where I am now</h2>';
       }
       else{
		 var myHtml = place.address + '<br>' +'<img src=\"pic/mars.jpg\" alt=\"Mars\"></img><h2>Probabaly it\'s the next destination!</h2>';
       }
       marker.openInfoWindowHtml(myHtml);


     }
    }

    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
     var address = document.forms[0].q.value;
     geocoder.getLocations(address, addAddressToMap);
    }

    // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
     document.forms[0].q.value = address;
     showLocation();
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <!-- Creates a simple input box where you can enter an address
         and a Search button that submits the form. //-->
    <form action="#" onsubmit="showLocation(); return false;">
      <p>
        <b>Search for an address:</b>
        <input type="text" name="q" value="" class="address_input" size="40" />
        <input type="submit" name="find" value="Search" />

      </p>
    </form>
    <div id="map_canvas" style="width: 1000px; height: 500px"></div>

    <!-- Sample addresses //-->
    <p>
      <b>The Places That I have been</b><br />

      <a href="javascript:void(0)"
      onclick="map.clearOverlays();return false;">
      Clear All the marks</a><br />


      <a href="javascript:void(0)"
      onclick="findLocation('Sichuan,China');return false;">
      Deyang,Sichuan,<b>China</b></a><br />

      <a href="javascript:void(0)"
      onclick="findLocation('Hangzhou');return false;">
      Hangzhou,Zhejiang,<b>China</b></a><br />

      <a href="javascript:void(0)"
      onclick="findLocation('Vancouver,Canada');return false;">Vancouver,BC,<b>Canada</b></a><br />
    </p>
    <br/>
    <p>
       <h2>What's this page about?</h2>
       This iMap application is based on google api. Main features includes controling the map(drag,zoom),searching the map,marking a place,and show some information about that place.
       <h2>How is it implemented</h2>
       first,you need to get an api key:
       <pre class="sourcecodebox">
       &lt; script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAwMhwoJJvbA36y50a8srh7hSCEl9-SC7IDYicgXt1cEF18Qh3FhT_3JQ8CRIhCdb8-3PDAooruRxsbw
       "/&gt;
	   </pre>
	   Then,you can inialize the application through initializer.We set up the map controller, draw a polyline of threee places,and launch the geocoder.geocoder will listen to the clicks of links.
	   <pre class="sourcecodebox">
	    function initialize() {
        map = new GMap2(document.getElementById("map_canvas"));

        //Add map control
	    map.removeMapType(G_HYBRID_MAP);
	    map.setCenter(new GLatLng(34, 0), 1);
        map.addControl(new GLargeMapControl());
        var mapControl = new GMapTypeControl();
        map.addControl(mapControl);

       //Add Polyline
       var polyline = new GPolyline([
       new GLatLng(30.66, 104.2),
       new GLatLng(30.28, 120.2),new GLatLng(49,-123)
       ], "#ff0000", 5);
       map.addOverlay(polyline);

     geocoder = new GClientGeocoder();
    }
    </pre>
    And,addAddressToMap() is called when the geocoder returns an answer.  It adds a marker to the map with an open info window showing the nicely formatted version of the address and the country code as an html file.
    <pre class="sourcecodebox">
	  function addAddressToMap(response) {
	   ........
	    if(place.Point.coordinates[1]==30.6610565&&place.Point.coordinates[0]==104.0817566){

        ........
        marker.openInfoWindowHtml(myHtml);
	  }
	</pre>
    And we need to set up the function executed when a link is clicked.
    <pre class="sourcecodebox">
	  $lt;a href="javascript:void(0)"
      onclick="findLocation('Sichuan,China');return false;"&gt;

	</pre>
       <h2>Comparison with alternatives</h2>
       The popular alternatives of google map includes oziExplorer, Yahoo! Map, and OpenLayers. Among them, only Yahoo! Map and OpenLayers support map API. Yahoo! Map has a SDK available for PHP, javascript, Perl which makes it more compatible. Google map API are all implemented in javacsript, and since some navigators doesn’t support javascript well, it’s a small pity for google map. However, google map api has the most abundant features than any others like markers, polyline, polygone, streetview. And with google’s other powerful api, you can make the application as imaginable as you want.

	</p>
  </body>
</html>